<template>
  <Modal
    v-model="show"
    v-bind:title="modalTitle"
    :scrollable="true"
    class-name="vertical-center-modal"
    :mask-closable="false"
    @on-cancel="cancel"
  >
    <Form ref="guestInfoForm" :model="guestInfo" :label-width="55" :rules="ruleValidate">
      <!--照片-->
      <Row type="flex" justify="center" style="margin-bottom: 5px">
        <div style="margin-bottom: 10px">
          <a href="javascript:;" class="staff-file" ref="avatar_guest">
            <input
              type="file"
              accept="image/png, image/jpeg, image/jpg"
              @change="preview"
              title=" "
            >
          </a>
        </div>
      </Row>
      <Row type="flex" justify="space-between">
        <Col style="width: 48.5%">
          <FormItem label="日期" aria-colspan="20" prop="validate_date">
            <DatePicker
              v-model="guestInfo.validate_date"
              type="daterange"
              placeholder="默认所有时间"
              format="yyyy/MM/dd"
              style="width: 100%"
              @on-change="handleDateChange()"
            ></DatePicker>
          </FormItem>
          <FormItem label="电话" prop="user_phone">
            <Input v-model.trim="guestInfo.user_phone" placeholder="请输入电话号码"/>
          </FormItem>
          <FormItem label="接待" prop="user_receptionist">
            <Input v-model.trim="guestInfo.user_receptionist" placeholder="请输入接待人姓名"/>
          </FormItem>
        </Col>
        <Col style="width: 48.5%">
          <FormItem label="姓名" prop="user_name">
            <Input v-model.trim="guestInfo.user_name" placeholder="请输入姓名"/>
          </FormItem>
          <FormItem label="性别" prop="user_sex">
            <RadioGroup v-model="guestInfo.user_sex">
              <Radio label="1">男</Radio>
              <Radio label="0">女</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="单位" prop="user_company">
            <Input v-model.trim="guestInfo.user_company" placeholder="请输入单位名称"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <FormItem label="主标题" prop="user_mark">
          <Input v-model="guestInfo.user_mark" placeholder="请输入标语"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="副标题" prop="user_mark2" style="margin-bottom: 2px">
          <Input v-model="guestInfo.user_mark2" placeholder="请输入副标语"/>
        </FormItem>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="primary" @click="handleSubmit">提交</Button>
    </div>
  </Modal>
</template>
<script>
import {
  getStaffData,
  getAvatar,
  addOrUpdateGuest,
  deleteUser,
  getDepartmentList,
  regFeature,
  getFeature,
  delFeature,
  uploadStaffData,
  registBatch
} from "../../../controllers/user";
import { read, recordToUser } from "../../../controllers/record";

import pic from "../../../images/upload.png";

export default {
  name: "add-guest",
  data: () => {
    const validateDate = (rule, value, callback) => {
      if (!value || value.length != 2) {
        callback(new Error("日期格式错误"));
      } else {
        callback();
      }
    };
    return {
      show: false,
      edit_flag: true,
      modalTitle: "添加至访客",
      rec_id: "",
      guestInfo: {
        user_id: "",
        user_type: "2",
        user_name: "",
        user_phone: "",
        user_avatar: "",
        user_mark: "",
        user_mark2: "",
        user_sex: "0",
        validate_date: "",
        access_from: "",
        access_to: "",
        user_receptionist: "",
        user_company: "",
        rec_capture: ""
      },
      ruleValidate: {
        user_name: [
          { required: true, message: "姓名不可以为空", trigger: "change" }
        ],
        //                        user_mark: [{required: true, message: "备注不可以为空", trigger: "change"}],
        //                        user_sex: [{required: true, message: "性别不可以为空", trigger: "change"}],
        // validate_date: [
        //   { required: false, validator: validateDate, trigger: "change" }
        // ],
        user_phone: [
          {
            pattern: /^1\d{10}$/,
            message: "电话格式不正确",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    async showModal(row) {
      this.guestInfo.user_id = row.user_id;
      this.guestInfo.user_avatar = row.user_avatar;
      this.guestInfo.user_name = row.user_name;
      let image = this.guestInfo.user_avatar ? this.guestInfo.user_avatar : pic;
      this.guestInfo.rec_capture = row.rec_capture;
      this.rec_id = row.rec_id;
      if (!row.user_avatar && row.rec_capture) {
        image = await read(row.rec_capture);
        this.guestInfo.user_avatar = image.split(",")[1];
      }
      this.$refs["avatar_guest"].style.backgroundImage = "url(" + image + ")";
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    preview() {},
    handleDateChange() {},
    handleSubmit() {
      this.$refs["guestInfoForm"].validate(async valid => {
        if (!valid) {
          this.$Message.error("请检查输入!");
          return;
        }

        let options = this.guestInfo.user_id ? "update" : "register";
        if (options == "update") {
          this.guestInfo.user_avatar = "";
        }
        addOrUpdateGuest(options, this.guestInfo).then(async res => {
          if (res.code == 0) {
            if (options == "register") {
              let user_id = res.data.user_id;
              let image = await read(this.guestInfo.rec_capture);
              let parts = image.split(",");
              let format = parts[0];
              let data = parts[1];
              regFeature({
                user_id: user_id,
                feature_pic: [
                  {
                    type: "png",
                    picdata: data
                  }
                ]
              });
              recordToUser({
                rec_id: this.rec_id,
                user_id: user_id
              });
            }
            this.guestInfo.user_avatar = "";
            this.$Message.success("提交成功!");
            this.show = false;
            this.$emit("updated");
            // });
          } else {
            this.$Message.error("提交失败!");
          }
        });
      });
    }
  }
};
</script>